<template>
	<view>
		<!-- 定位 -->
		<view class="search-view">
			<image mode="widthFix"></image>
			<text class="search-text">阿里爸爸淘宝城2期西溪园区</text>
			<text>></text>
		</view>
		<!-- 搜索 -->
		<view class="seach-cont">
			<view class="search">
				<image mode="widthFix" class="search-img"></image>
				<input type="text" placeholder="麻辣烫" disabled />
			</view>
		</view>
		<!-- 自定义轮播图 -->
		<view class="swiper-view">
			<swiper class="swiper" @change="bannerFun" :autoplay="false" :interval="interval" :duration="duration">
				<block v-for="(item ,index) in swiperList " :key="index">
					<swiper-item class="swiper-item">
						<block v-for="(node ,i) in item " :key="i">
							<view class="swiper-cont">
								<image class="upLoading" mode="widthFix"></image>
								<text>{{node.title}}</text>
							</view>
						</block>
					</swiper-item>
				</block>
			</swiper>
			<view class="instruct-view">
				<block v-for ="(item ,index) in swiperList.length" :key="index">
					<view class="instruct" :class="{active:index==num}">
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				num: 0,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 1000,
				swiperList: [
					[{
							title: "你好"
						},
						{
							title: "你好"
						},
						{
							title: "你好"
						},
						{
							title: "你好"
						},
						{
							title: "你好"
						},
						{
							title: "你好"
						},
						{
							title: "你好"
						},
						{
							title: "你好"
						},
						{
							title: "你好"
						},
						{
							title: "你好"
						},
					],
					[{
							title: "你不好"
						},
						{
							title: "你不好"
						},
						{
							title: "你不好"
						},
						{
							title: "你不好"
						},
						{
							title: "你不好"
						},
						{
							title: "你不好"
						},
						{
							title: "你不好"
						},
						{
							title: "你不好"
						},
						{
							title: "你不好"
						},
						{
							title: "你不好"
						},
					]
				]
			}
		},
		onLoad: {

		},
		methods: {
			bannerFun(data){
				this.num=data.detail.current
			}
		}
	}
</script>

<style scoped>
	/* 定位 */
	.search-view image {
		width: 35upx;
		height: 35upx;
		background-color: #007AFF;
	}

	.search-view {
		font-size: 30upx;
		font-weight: bold;
		display: flex;
		align-items: center;
		height: 80upx;
	}

	.search-text {

		padding: 0 10upx;

	}

	/* 搜索 */

	.search-img {
		margin: auto 0 auto 20upx;
		width: 40upx;
		height: 40upx;
		background-color: #4CD964;
	}

	.search {
		height: 70upx;
		line-height: 70upx;
		width: 100%;
		display: flex;
		/* flex-direction: flex; */
		background-color: #eff3f4;
		border-radius: 10rpx;
	}

	.search input {
		width: 100%;
		height: 70upx;
		line-height: 70upx;
		font-size: 25upx;
		color: #666666;
	}

	.seach-cont {
		display: flex;
		/* justify-content: space-between; */
		height: 70upx;
		align-items: center;
	}

	/*  自定义轮播图*/

	swiper {
		height: 320upx !important;

	}

	,

	.swiper-item {
		display: flex;
		justify-content: center;
		align-items: center;
		/* 分行 */
		flex-wrap: wrap;
		height: 320upx;
		flex: 20%;
	}

	.swiper-cont {
		width: calc(100%/5-12px) !important;
		margin: 6px 15px;
		position: relative;
		text-align: center;
	}

	.swiper-cont text {
		margin-top: 20upx;
		font-size: 25upx;
	}

	.swiper-cont .upLoading {
		width: 70upx;
		height: 70upx;
		border-radius: 50upx;
		display: block;
		margin: 0 auto;
		background-color: #4CD964;
	}

	/* 指示点 */

		.instruct-view{
		display: flex;
		justify-content: center;
		padding-top: 10upx;
	},
	.instruct-view .instruct{
		background-color: #e6e6e6;
		height: 10upx;
		width: 30upx;
		border-radius: 50upx;
		margin: 0 5upx;
	},
	.active{
		
		background-color: #007AFF !important;
	}
</style>
